<template>
  <el-card class="form-container" shadow="never">
    <el-form ref="editOperForm" :model="editOperForm" :rules="editOperFormRules" label-width="150px">
      <el-form-item label="上传图片:">
        <multi-upload v-model="uploadUrl" folder="photo" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>

import {
  create
} from '@/api/life/photo'
import MultiUpload from '@/components/Upload/MultiUpload'

export default {
  name: 'PhotoDetail',
  components: { MultiUpload },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      uploadUrl: null,

      editOperForm: {},
      editOperFormRules: {
        logo: [
          { required: true, message: '请上传照片', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    uploadUrl(newValue) {
      debugger
      if (newValue) {
        const urls = []
        newValue.map(item => {
          urls.push(item.url)
        })

        this.editOperForm.urls = urls
      } else {
        this.editOperForm.urls = []
      }
    }
  },
  created() {
    const albumId = this.$route.query.albumId

    if (!albumId) {
      this.$router.back()
      return
    }

    this.albumId = albumId
  },
  methods: {
    onSubmit() {
      this.$refs.editOperForm.validate(valid => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.editOperForm.albumId = this.albumId

            create(this.editOperForm).then(response => {
              this.$message({
                message: '提交成功',
                type: 'success',
                duration: 1000
              })

              this.$router.back()
            })
          })
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          })
          return false
        }
      })
    }
  }
}
</script>
<style>
</style>

